<template>
  <div
    class="components-layout-left leftNav"
    @click="display_contextmenu = false"
    ref="containerRef"
  >
    <div class="button" @click="addComponent"><plus-outlined />添加组件</div>
    <!-- <a-input-search placeholder="搜索组件" /> -->
    <a-collapse
      v-model:activeKey="activeKey"
      accordion
      @change="display_contextmenu = false"
      :expand-icon-position="'right'"
    >
      <a-collapse-panel key="1" header="拖动组件">
        <div class="container">
          <ul class="svg-nav-list" v-if="draggableComponentList.length">
            <li v-for="item in draggableComponentList" :key="item">
              <div class="title">{{ item.title }}</div>
              <img
                :title="item.title"
                @contextmenu.prevent="contextmenuEvent($event, item)"
                @mousedown="Mousedown(item)"
                :src="item.priviewImg"
                draggable="draggable"
              />
            </li>
          </ul>
          <a-empty v-else description="暂无拖拽组件" />
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="绘制组件" :disabled="false">
        <div class="container">
          <ul class="svg-nav-list" v-if="drawComponentList.length">
            <li
              v-for="item in drawComponentList"
              :key="item"
              :class="
                $store.state.CurrentlySelectedToolBar.Id == item.id
                  ? 'toolbar-selected'
                  : ''
              "
              @contextmenu.prevent="contextmenuEvent($event, item)"
            >
              <div class="title">{{ item.title }}</div>
              <img
                :title="item.title"
                @mousedown="Mousedown(item)"
                :src="item.priviewImg"
              />
            </li>
          </ul>
          <a-empty v-else description="暂无绘制组件" />
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="背景组件">
        <div class="container">
          <ul class="svg-nav-list" v-if="backgroundComponentList.length">
            <li
              v-for="item in backgroundComponentList"
              :key="item"
              :class="
                $store.state.BGIMG.ID == item.id ? 'toolbar-selected' : ''
              "
              @contextmenu.prevent="contextmenuEvent($event, item)"
            >
              <div class="title">{{ item.title }}</div>
              <img
                v-if="item.priviewImg"
                :title="item.title"
                @mousedown="Mousedown(item, 'bgImg')"
                :src="item.priviewImg"
              />
              <div
                v-else
                class="blackDiv"
                @mousedown="Mousedown(item, 'bgImg')"
              >
                默认
              </div>
            </li>
          </ul>
          <a-empty v-else description="暂无绘制组件" />
        </div>
      </a-collapse-panel>
      <!-- <a-collapse-panel key="3" header="图表">
        <ul class="svg-nav-list">
          <li v-for="item in chartComponentList" :key="item">
            <div class="title">{{ item.title }}</div>
            <img
              :title="item.title"
              @contextmenu.prevent="contextmenuEvent"
              @mousedown="
                Mousedown(
                  item.type,
                  item.title,
                  item.defaultAttr,
                  item.create_type
                )
              "
              :src="item.priview_img"
              draggable="draggable"
            />
          </li>
        </ul>
      </a-collapse-panel> -->
    </a-collapse>
    <!-- 右键菜单 -->
    <ul ref="contextMenuRef" class="contextMenu" v-show="display_contextmenu">
      <li
        v-for="(item, index) in contextmenu_data"
        :key="index"
        @click="deleteMenu(item)"
      >
        <p :class="item.enable ? '' : 'disabled'">
          {{ item.name }}
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
import { PlusOutlined } from '@ant-design/icons-vue';
import { imageUrlToBase64 } from '../util';
export default {
  props: ['svgInfoData'],
  data() {
    return {
      contextmenu_data: [
        {
          id: '',
          name: '删除',
          type: 'delete',
          enable: true,
        },
      ],
      activeKey: ['1'], //当前激活的key
      text: `这里是预留位置.`,
      draggableComponentList: [], //拖动组件
      drawComponentList: [], //绘制类型组件
      backgroundComponentList: [], //图表类型
      display_contextmenu: false, //右键菜单
      selectMenu: {},
      CurrentlySelectedObj: {},
    };
  },
  watch: {
    svgInfoData: {
      deep: true,
      handler(val) {
        if (val) {
          this.draggableComponentList = val.filter((m) => {
            return m.createType == 'draggable';
          });
          this.drawComponentList = val.filter((m) => {
            return m.createType == 'draw';
          });
          this.backgroundComponentList = val.filter((m) => {
            return m.createType == 'bgImg';
          });
          //默认背景色
          this.backgroundComponentList.unshift({
            id: 'FirstOneBgImg',
            createType: 'default',
            priviewImg: '',
            base64Data: '#000000',
          });
        }
      },
    },
  },
  methods: {
    addComponent() {
      this.$emit('showAddSvgModal');
    },
    /**
     * @description: 点击左侧工具栏触发函数
     * @param {*} type
     * @param {*} title
     * @param {*} defaultAttr 属性默认值
     * @param {*} createType 组件创建方式
     * @return {*}
     */
    Mousedown(item, type = 'normal') {
      switch (type) {
        case 'normal':
          this.CurrentlySelectedObj = {
            Id: item.id,
            ImgType: item.imgType, //图像类型
            Type: item.type, //选中的工具栏svg类型
            TypeName: item.title, //选中的工具栏svg类型名称
            Title: item.title, //选中的工具栏svg标题
            Color: item.defaultAttr?.color, //选中的工具栏svg颜色
            CreateType: item.createType, //选中工具栏的创建方式
            EChartsOption: item.defaultAttr?.echartsOption,
            Default_Attr: item.defaultAttr,
            Template:item.template
          };
          this.$store.setCurrentlySelectedToolBarAction(
            this.CurrentlySelectedObj
          );
          break;
        case 'bgImg':
          item.priviewImg;
          if (item.priviewImg) {
            imageUrlToBase64(item.priviewImg).then((base64) => {
              // base64.blob().then((bolob) => {
              //   let reader = new FileReader();
              //   reader.onLoadend = () => {
              //     console.log(reader.result);
              //   };
              //   reader.readAsDataURL(bolob);
              //   console.log(reader);
              // });

              this.CurrentlySelectedObj = {
                ID: item.id,
                TYPE: item.createType,
                BASE64DATA: base64,
              };
              this.$store.setCurrentlySelectBase64DataAction(
                this.CurrentlySelectedObj
              );
            });
          } else {
            this.CurrentlySelectedObj = {
              ID: item.id,
              TYPE: item.createType,
              BASE64DATA: item.base64Data,
            };
            this.$store.setCurrentlySelectBase64DataAction(
              this.CurrentlySelectedObj
            );
          }

          break;
      }
      this.display_contextmenu = false;
    },
    contextmenuEvent(e, item) {
      if (item.defaultIcon == 1) {
        const contextMenuRef = this.$refs.contextMenuRef;
        this.display_contextmenu = true;
        contextMenuRef.style.left = e.pageX + 'px';
        contextMenuRef.style.top = e.pageY - 80 + 'px';
        this.contextmenu_data.map((m) => ((m.enable = true), (m.id = item.id)));
      }
    },
    deleteMenu(item) {
      this.$emit('deleteMenu', item.id);
      this.display_contextmenu = false;
    },
  },
  mounted() {},
  components: {
    PlusOutlined,
  },
};
</script>
<style lang="less" scoped>
::-webkit-scrollbar {
  width: 6px;
  height: 5px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f2f2f2;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #9e9e9e;
}
.components-layout-left .ant-input-search-icon {
  font-size: 20px !important;
  color: #1890ff !important;
}
.components-layout-left .ant-collapse,
.components-layout-left .ant-collapse-content,
.components-layout-left .ant-collapse > .ant-collapse-item {
  border-color: #eee !important;
}
/deep/ .ant-collapse-content > .ant-collapse-content-box {
  padding: 0 !important;
}
.ant-input-affix-wrapper {
  height: 45px;
  line-height: 45px;
  border: none;
}
.svg-nav-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 20px;
  padding: 0;

  li {
    position: relative;
    // width: calc(33.33% - 30px);
    width: 50px;
    height: 50px;
    margin: 0 15px 15px 15px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 1px 1px 5px #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:hover {
      box-shadow: 1px 1px 10px #ccc;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .blackDiv {
      background-color: #000000;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      color: white;
      text-align: center;
      line-height: 50px;
    }

    .title {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      text-align: center;
    }
  }

  &.two-item {
    li {
      width: calc(50% - 30px);
      height: 100px;
      margin-bottom: 25px;
      border-radius: 10px;

      img {
        width: auto;
        height: 100%;
      }
    }
  }
}
.toolbar-selected {
  outline: 1px solid #0cf;
}
.leftNav {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  min-width: unset !important;
  max-width: unset !important;
  width: 260px !important;
  z-index: 1;
  height: 688px;
  overflow: hidden;
}
.contextMenu {
  position: absolute;
  z-index: 99999;
  background: #ffffff;
  padding: 5px 0;
  margin: 0px;
  display: block;
  border-radius: 5px;
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
}

.contextMenu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.contextMenu .shortcut {
  width: 115px;
  text-align: right;
  float: right;
}

.contextMenu p {
  text-decoration: none;
  display: block;
  padding: 0px 15px 1px 20px;
  margin: 0;
  user-select: none;
  color: #262626;
  -webkit-user-select: none;
}

.contextMenu p:hover {
  background-color: #0cf;
  color: #ffffff;
  cursor: default;
}

.contextMenu .disabled {
  color: #999;
}
.contextMenu .disabled:hover {
  color: #999;
  background-color: transparent;
}
.contextMenu li.separator {
  border-top: solid 1px #e3e3e3;
  padding-top: 5px;
  margin-top: 5px;
}
.button {
  text-align: center;
  padding: 10px;
  color: white;
  background: #1890ff;
}
.button:hover {
  cursor: pointer;
}
.container {
  max-height: 494px;
  min-height: 122pxs;
  overflow: auto;
}
</style>
